<template>
	<!-- 20221019 -->
	<view class="registe-login-cn">

		<!-- 页面内容 -->
		<view class="cn-content">
			<ty-layer-pop-up v-if="show">

				<!-- #ifdef MP-WEIXIN|MP-ALIPAY|MP-TOUTIAO -->
				<!-- 支付宝小程序 | 微信小程序 | 抖音小程序 授权手机号快捷登录-->
				<view class="position-relative layer-content bg-ff" @click.stop="">

					<!-- LOGO -->
					<view class="margin-lr-30" style="padding-top: 140rpx;">
						<image class="jc-avatar-160 block-center" :src="logoImg" mode="aspectFit"></image>
						<text class="margin-top-30 text-cut-one text-center text-34 text-bold text-33">{{name}}</text>
					</view>

					<!-- 说明 -->
					<view class="margin-tb-30 text-center">
						<view class="text-32 text-bold text-33">
							申请获取以下权限
						</view>
						<view class="margin-top-10 text-30 text-77">
							获取您的平台授权手机号信息
						</view>
					</view>

					<!-- 操作按钮 -->
					<view class="margin-top-40 margin-lr-60 text-center text-30">
						<!-- #ifdef MP-WEIXIN|MP-TOUTIAO -->
						<button open-type="getPhoneNumber" class="width-100p radius-40 border-main bg-main text-ff"
							style="height: 80rpx;line-height: 76rpx;" @getphonenumber="getPhoneNumber" v-if="agree">
							授权手机号快捷登录
						</button>
						<button class="width-100p radius-40 border-main bg-main text-ff"
							style="height: 80rpx;line-height: 76rpx;" v-if="!agree" @click="goAgree">
							授权手机号快捷登录
						</button>
						<!-- #endif -->

						<!-- #ifdef MP-ALIPAY -->
						<button open-type="getAuthorize" class="width-100p radius-40 border-main bg-main text-ff"
							style="height: 80rpx;line-height: 76rpx;" scope="phoneNumber"
							@getAuthorize="getPhoneNumber" v-if="agree">
							授权手机号快捷登录
						</button>
						<button class="width-100p radius-40 border-main bg-main text-ff"
							style="height: 80rpx;line-height: 76rpx;" v-if="!agree" @click="goAgree">
							授权手机号快捷登录
						</button>
						<!-- #endif -->

						<view class="margin-top-30 width-100p radius-40 border-main bg-ff text-main"
							style="height: 80rpx;line-height: 76rpx;" @click="close">取消</view>

						<view class="jc-footer-safe">
							<view>
								<view class="margin-bottom-35 flex align-center justify-center text-22">
									<text
										:class="[agree === true ? 'tyIcon-round-check text-main' : 'tyIcon-round text-cc','text-32']"
										@click="agreeNotice"></text>
									<view class="margin-left-15 text-98">登录注册即代表您同意</view>
									<view class="text-4b8" @click="goPrivacy">《隐私政策》</view>
									<view class="text-98">与</view>
									<view class="text-4b8" @click="goAgreement">《用户协议》</view>
								</view>
							</view>
						</view>
					</view>
				</view>
				<!-- #endif -->

				<!-- #ifdef H5|APP-PLUS -->
				<view class="position-relative layer-content bg-ff" @click.stop="">
					<slot></slot>
					<!-- 关闭按钮 -->
					<text class="close_block tyIcon-close text-32 text-4d" @click="close"></text>

					<!-- 注册表单 -->
					<view class="form_block">
						<view class="text-50 text-bold text-1a">
							登录以使用更多服务
						</view>

						<view class="info">
							<view class="flex align-center line-height-110 border-bottom-ed">
								<text class="tyIcon-phone-line text-34 text-1a"></text>
								<input class="margin-left-15 flex-one" type="number" name="mobile_phone" maxlength="11"
									v-model="mobile_phone" placeholder="请输入手机号" placeholder-class="text-28 text-aa" />
							</view>

							<view class="flex align-center line-height-110 border-bottom-ed" v-show="type === 1">
								<text class="tyIcon-message-2 text-34 text-1a"></text>
								<input class="margin-lr-15 flex-one" type="number" name="code" maxlength="4"
									v-model="code" placeholder="请输入验证码" placeholder-class="text-28 text-aa" />
								<ty-register-get-code :mobile-phone="mobile_phone"></ty-register-get-code>
							</view>

							<view class="flex align-center line-height-110 border-bottom-ed" v-show="type === 2">
								<text class="tyIcon-lock text-34 text-1a"></text>
								<input class="margin-left-15 flex-one" type="text" name="password" v-model="password"
									placeholder="请输入密码" placeholder-class="text-28 text-aa" v-if="password_show" />
								<input class="margin-left-15 flex-one" type="password" name="password"
									v-model="password" placeholder="请输入密码" placeholder-class="text-28 text-aa"
									v-if="!password_show" />

								<text class="margin-lr-15 text-34 text-33"
									:class="password_show ? 'tyIcon-eye-open' : 'tyIcon-eye-close'"
									@click="password_show = !password_show"></text>
								<view class="padding-left-20 line-height-40 border-left-ed text-28 text-1a"
									@click="goPassword">忘记密码</view>
							</view>
						</view>

						<view
							class="margin-top-80 width-100p line-height-footer radius-50 bg-main-gradient text-center text-32 text-ff"
							:class="can_login ? '' : 'opacity'" @click="login">
							登录
						</view>

						<!-- #ifdef APP-PLUS  -->
						<view class="margin-top-45 flex justify-between text-26 text-77">
							<view @click="type = 2;password = '';can_login = false" v-show="type === 1">账号密码登录</view>
							<view @click="type = 1;code = '';can_login = false" v-show="type === 2">验证码登录</view>
							<view @click="goRegister">立即注册</view>
						</view>
						<!-- #endif  -->
					</view>
				</view>
				<!-- #endif -->


				<view class="jc-footer-safe">
					<view>
						<!-- 只有APP有三方登录和用户协议 -->
						<!-- #ifdef APP-PLUS  -->
						<view v-if="is_check == 0">
							<ty-register-third-auth :agree="agree" :auth="auth" @register="thirdRegister"
								@login="thirdLogin">
							</ty-register-third-auth>
						</view>
						<!-- #endif  -->

						<view class="margin-top-55 margin-bottom-35 flex align-center justify-center text-22">
							<text
								:class="[agree === true ? 'tyIcon-round-check text-main' : 'tyIcon-round text-cc','text-32']"
								@click="agreeNotice"></text>
							<view class="margin-left-15 text-98">登录注册即代表您同意</view>
							<view class="text-4b8" @click="goPrivacy">《隐私政策》</view>
							<view class="text-98">与</view>
							<view class="text-4b8" @click="goAgreement">《用户协议》</view>
						</view>
					</view>
				</view>

			</ty-layer-pop-up>
		</view>

		<!-- 页面浮层 -->
		<view class="cn-layer">

		</view>
	</view>
</template>

<script>
	import common from '@/components/hzjc/utils/common.js'
	import request from '@/components/hzjc/utils/request.js'
	export default {
		props: {
			show: { //浮层是否显示
				type: Boolean,
				default: true
			},
			auth: {
				type: Array,
				default: () => ['weixin', 'qq', 'sinaweibo', 'apple']
			},
			agree: { //默认选中用户协议
				type: Boolean,
				default: false
			},
			showType: { //类型 1--浮层 2--页面
				type: [Number, String],
				default: 1
			},
			register_url: { //注册链接
				type: String,
				default: '/pages/user/register/register'
			},
			password_url: { //修改密码链接
				type: String,
				default: '/pages/user/register/password?type=2'
			},
			notice_url: { //用户协议链接
				type: String,
				default: '/pages/common/richText?title=用户协议&url=project/api/Config/getAgreement&param=agreement'
			},
			privacy_url: { //隐私政策链接
				type: String,
				default: '/pages/common/richText?title=隐私政策&url=project/api/Config/getAgreement&param=privacy_policy'
			},
			third_register_url: { //三方授权注册链接
				type: String,
				default: '/pages/user/register/register'
			}
		},

		data() {
			return {
				mobile_phone: "", //手机号
				code: "", //验证码
				password: "", //密码
				password_show: false, //是否显示密码
				type: 1, //1：手机验证码登录 2：账号登录
				is_check: 1, //是否在审核状态 0--不在审核 1--在审核状态
				// 项目名称
				name: '',
				// 项目LOGO
				logoImg: '',
				user_agent: '', //项目所在环境
			}
		},

		watch: {
			show(newVal) {
				if (newVal == true) { //浮层显示时隐藏底部导航栏
					uni.hideTabBar()
					let third_type = uni.getStorageSync('third_type')
					let third_type_id = uni.getStorageSync('third_type_id')
					// console.log(third_type + '  ' + third_type_id)
					if (third_type && third_type_id) {
						this.$emit("update:show", false);
						uni.navigateTo({
							url: this.third_register_url + '?type=' + third_type + '&id=' + third_type_id
						})
					}
				} else { //浮层隐藏时显示底部导航栏
					uni.showTabBar()
				}
			}
		},

		computed: {
			// 判断是否可以登录
			can_login: {
				get() {
					if (this.type == 1 && this.mobile_phone.length == 11 && this.code.length == 4) {
						return true
					} else if (this.type == 2 && this.mobile_phone.length == 11 && this.password !== '') {
						return true
					} else {
						return false
					}
				},
				set() {

				}
			}
		},

		mounted() {
			//获取当前所在环境
			this.user_agent = common.userAgent()

			//是否在上架中  上架中关闭三方平台授权登录
			request.getData('project/api/Config/isCheckStatus').then(res => {
				if (res.code === 0) {
					this.is_check = res.data.is_check
				}
			})

			// 获取项目LOGO
			request.getData('project/api/Config/getLogo').then(res => {
				if (res.code == 0) {
					this.name = res.data.config.name
					this.logoImg = res.data.config.square_logo_img
				}
			})
		},

		methods: {
			// 关闭浮层
			close() {
				// #ifdef APP-PLUS|H5
				// 清空填写数据
				this.mobile_phone = ''
				this.code = ''
				this.password = ''
				// #endif

				this.$emit("update:show", false)

				if (this.showType == 2) { //页面展示返回上一页
					uni.navigateBack({
						delta: 1
					})
				}

				this.$emit("close")
			},

			//同意用户协议
			agreeNotice() {
				this.$emit("update:agree", !this.agree)
			},
			
			/**
			 * 微信小程序还没有同意协议时点击授权手机号按钮
			 * @date 2022-11-30
			 */
			goAgree(){
				common.toast("请勾选用户协议")
				return false
			},

			//登录
			login: function() {
				
				if (!this.agree) {
					common.toast("请勾选用户协议")
					return false
				}
				
				if (!this.mobile_phone) {
					common.toast("请输入手机号")
					return false
				}
				if (this.type === 1 && !this.code) {
					common.toast("请输入验证码")
					return false
				} else if (this.type === 2 && !this.password) {
					common.toast('请输入密码')
					return false
				}

				request.getData('base/user/api/Login/login', {
					type: this.type,
					mobile_phone: this.mobile_phone,
					code: this.code,
					password: this.password
				}).then(res => {
					if (res.code === 0) {
						uni.setStorageSync('user_id', res.data.user_id)
						uni.setStorageSync('access_token', res.data.access_token)
						uni.setStorageSync('access_token_expire_time', res.data.access_token_expire_time)

						//清空填写数据
						this.mobile_phone = ''
						this.code = ''
						this.password = ''

						this.$emit("update:show", false);
						this.$emit('login')
					}
				})
			},


			/**
			 * 获取手机号
			 * @param {Object} e
			 * @date 2022-10-19
			 */
			getPhoneNumber(e) {
				// #ifdef MP-WEIXIN
				if (e.detail.code) {
					var openid = uni.getStorageSync('openid')
					request.getData('base/mpweixin/api/Auth/getPhoneNumber', {
						code: e.detail.code
					}).then(res => {
						if (res.code == 0) {
							uni.setStorageSync('user_id', res.data.user_id)
							uni.setStorageSync('access_token', res.data.access_token)
							uni.setStorageSync('access_token_expire_time', res.data.access_token_expire_time)

							this.$emit("update:show", false)
							this.$emit('login')
						}
					})
				} else {
					console.log(e.detail.errMsg)
				}
				// #endif

				// #ifdef MP-ALIPAY
				my.getPhoneNumber({
					success: (res) => {
						let encryptedData = res.response
						encryptedData = JSON.parse(encryptedData)
						request.getData('base/mpalipay/api/Auth/getPhoneNumber', {
							encrypted_data: encryptedData.response
						}).then(res => {
							if (res.code == 0) {
								uni.setStorageSync('user_id', res.data.user_id)
								uni.setStorageSync('access_token', res.data.access_token)
								uni.setStorageSync('access_token_expire_time', res.data
									.access_token_expire_time)

								this.$emit("update:show", false)
								this.$emit('login')
							}
						});
					},
					fail: (res) => {
						console.log(res)
					}
				})
				// #endif

				// #ifdef MP-TOUTIAO
				// 抖音小程序获取手机号
				if (e.detail.encryptedData) {
					var openid = uni.getStorageSync('openid')
					request.getData('base/mptoutiao/api/Auth/getPhoneNumber', {
						encrypted_data: e.detail.encryptedData,
						iv: e.detail.iv
					}).then(res => {
						if (res.code == 0) {
							uni.setStorageSync('user_id', res.data.user_id)
							uni.setStorageSync('access_token', res.data.access_token)
							uni.setStorageSync('access_token_expire_time', res.data.access_token_expire_time)

							this.$emit("update:show", false)
							this.$emit('login')
						}
					})
				} else {
					console.log(e.detail)
				}
				// #endif
			},


			/**
			 * 三方授权成功后注册
			 * @param {Object} data type--类型 id--三方授权用户ID
			 */
			thirdRegister(data) {
				this.$emit("update:show", false)
				uni.navigateTo({
					url: this.third_register_url + "?type=" + data.type + "&id=" + data.id
				})
			},

			//三方授权成功后登录
			thirdLogin() {

				this.$emit("update:show", false);

				// 触发关闭浮层后事件
				this.$emit("close");
			},

			//跳转用户协议
			goAgreement() {
				uni.navigateTo({
					url: this.notice_url
				})
			},

			//跳转隐私政策
			goPrivacy() {
				uni.navigateTo({
					url: this.privacy_url
				})
			},

			//跳转注册页面
			goRegister() {
				uni.navigateTo({
					url: this.register_url
				})
			},

			//忘记密码
			goPassword() {
				uni.navigateTo({
					url: this.password_url
				})
			}
		},
	}
</script>

<style scoped>
	.layer-content {
		width: 100vw;
		height: 100vh;
	}

	.close_block {
		position: absolute;
		left: 40rpx;
		/* #ifdef APP-PLUS */
		top: calc(var(--status-bar-height) + 40rpx);
		/* #endif */
		/* #ifndef APP-PLUS */
		top: 40rpx;
		/* #endif */
	}

	.form_block {
		padding: 150rpx 95rpx 0;
	}

	.info {
		margin-top: 100rpx;
	}

	.text-4b8 {
		color: #4B81B8;
	}

	.opacity {
		opacity: 0.3;
	}
</style>
